<template>
	<view class="content">
		<view class="from">
			<view class="form-box" style="border-top: 1px solid #F9F9F9;">
				<view class="form-item">
					<view class="form-lable">报修类目 <text>*</text></view>
					<!-- @click="showClass = true" -->
					<view class="form-content u-flex u-row-right" v-if="classification_name != '其他'">
						<text>{{classification_name}}</text>
						<!-- <image style="width: 16rpx;height: 28rpx;margin-left: 22rpx;" src="https://s1.ax1x.com/2022/11/18/znGaAU.png" mode=""></image> -->
					</view>
					<view v-if="classification_name == '其他'">
						<input v-model="from.other_classify" type="text" placeholder="请输入报修报修类目">
						<!-- <image style="width: 16rpx;height: 28rpx;margin-left: 22rpx;" src="https://s1.ax1x.com/2022/11/18/znGaAU.png" mode=""></image> -->
					</view>
				</view>
				<view class="form-item">
					<view class="form-lable">维修地点 <text>*</text></view>
					<!-- <view class="form-content u-flex u-row-between" @click="chooseLocation">
						<text :style="from.report == '选择报修地点' ? 'color: #808080;' :''">{{from.report}}</text>
						<u-select v-model="show" mode="mutil-column-auto" :list="list_dz" @confirm="confirm_dz"
						 label-name="name" child-name="list"
						></u-select>
					</view> -->
					<view style="display: flex; justify-content: space-between;width: 100%;">
						<u-input v-model="from.report" type="input" placeholder="选择报修地点" @confirm="searchProduct()" />
						<view slot="right">
							<button @click="searchProduct()"
								style="height: 67rpx;text-align: center;line-height: 67rpx;">搜索</button>
						</view>
						<u-select v-model="show" mode="mutil-column-auto" :list="showList" @confirm="confirm_dz"
							label-name="name" child-name="list"></u-select>
					</view>
				</view>
				<!-- <view class="form-item">
					<view class="form-lable">维修地点 <text>*</text></view>
					<view class="form-content u-flex u-row-between" @click="chooseLocation">
						<text :style="from.report == '选择报修地点' ? 'color: #808080;' :''">{{from.report}}</text>
						<image  style="width: 16rpx;height: 28rpx;margin-left: 22rpx;" src="https://s1.ax1x.com/2022/11/18/znGaAU.png" mode=""></image>
					</view>
				</view> -->
				<!-- <view class="form-item">
					<view class="form-lable">详细位置 <text>*</text></view>
					<view class="form-content">
						<input v-model="from.report_address" type="text" placeholder="请输入报修详细位置">
					</view>
				</view> -->
				<view class="form-item column" style="padding-top: 29rpx;border: none;">
					<view class="form-lable" style="margin-bottom: 29rpx;">报修说明<text>*</text></view>
					<view class="form-content">
						<textarea v-model="from.report_message" placeholder="请输入报修情况"></textarea>
					</view>
				</view>
				<view class="form-item column" style="padding-top: 29rpx;border: none;">
					<view class="form-lable" style="margin-bottom: 29rpx;">是否二次报修<text>*</text></view>
					<u-radio-group v-model="from.is_two_repair" @change="radioGroupChange">
						<u-radio shape="square" v-for="(item, index) in radiolist1" :key="item.id" :name="item.name"
							:disabled="item.disabled">
							{{item.name}}
						</u-radio>
					</u-radio-group>
				</view>
			</view>
			<view class="form-box" style="padding-top: 28rpx;padding-bottom: 40rpx;">
				<view class="form-item column" style="border: none;">
					<view class="form-lable" style="margin-bottom: 28rpx;">上传图片 <text>*</text></view>
					<view class="form-content">
						<u-upload ref="uUpload" :compress="true" width="160rpx" height="160rpx"
							:action="action" :file-list="fileList">
						</u-upload>
					</view>
				</view>
			</view>
			<view class="form-box" style="padding-top: 40rpx;padding-bottom: 40rpx;margin-bottom: 60rpx;">
				<view class="form-title">报修人员信息</view>
				<u-radio-group v-model="from.order_user_type">
					<u-radio shape="square" v-for="(item, index) in radiolist" :key="item.id" :name="item.name"
						:disabled="item.disabled">
						{{item.name}}
					</u-radio>
				</u-radio-group>
				<view v-if="getradiovalue(from.order_user_type) == 1">
					<view class="form-item">
						<view class="form-lable">姓名 <text>*</text></view>
						<view class="form-content">
							<input v-model="from.user_name" type="text" placeholder="请输入报修人员姓名">
						</view>
					</view>
					<view class="form-item">
						<view class="form-lable">电话 <text>*</text></view>
						<view class="form-content">
							<input v-model="from.user_phone" type="tel" placeholder="请输入报修人员联系电话">
						</view>
					</view>
				</view>

			</view>
		</view>
		<button class="u-reset-button btn-moren" @click="save_order">提交报修</button>
		<u-select v-model="showClass" :default-value="[index]" :list="list" label-name="name" value-name="id"
			@confirm="confirm"></u-select>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list_dz: [],
				showClass: false,
				list: [],
				showList: [],
				action: this.$IMG_URL + '/index/ajax/upload',
				fileList: [],
				id: '13',
				index: 0,
				classification_name: '',
				from: {
					classification_id: '',
					// report:'选择报修地点',
					report: '',
					// report_address:'',
					report_message: '',
					report_images: '',
					user_name: '',
					user_phone: '',
					other_classify: '',
					order_user_type: '自报',
					is_two_repair: '否'
				},
				radiolist: [{
						id: '0',
						name: '自报',
						disabled: false
					},
					{
						id: '1',
						name: '代报',
						disabled: false
					},
				],
				radiolist1: [{
						id: '0',
						name: '否',
						disabled: false
					},
					{
						id: '1',
						name: '是',
						disabled: false
					},
				],
				// u-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
			}
		},
		onLoad(e) {
			this.from.classification_id = e.id
			this.index = e.index
			this.classification_name = e.name
			this.getClassi()
			this.getPlace()
		},
		methods: {
			radioGroupChange(e) {
				console.log(e)
			},
			getradiovalue(e) {
				if (e == '自报') {
					return 0
				}
				if (e == '代报') {
					return 1
				}
			},
			getradioname(e) {
				if (e == 0) {
					return '自报'
				}
				if (e == 1) {
					return '代报'
				}

			},
			getradiovalue1(e) {
				if (e == '否') {
					return 0
				}
				if (e == '是') {
					return 1
				}
			},
			getradioname1(e) {
				if (e == 0) {
					return '否'
				}
				if (e == 1) {
					return '是'
				}
			
			},
			// 模糊搜索
			searchProduct() {
				console.log(this.value);
				if (this.from.report == '') {
					this.showList = this.list_dz
					this.show = true
				}
				if (this.from.report != '') {
					//前端匹配
					if (this.mapTree(this.from.report, this.list_dz).length > 0) {
						this.showList = this.mapTree(this.from.report, this.list_dz)
					} else {
						this.showList = [{
							"id": '',
							"name": "",
							"list": [{
								"name": "",
								"list": [{
									"name": "",
									"list": [{
										"name": ""
									}],
								}],
							}],
						}]
					}
					// console.log(JSON.stringify(this.showList))
					this.show = true

					//后端请求接口匹配
					// this.$u.post('/index/get_place',{}).then(res =>{
					// 	
					// 	this.showList = res.data
					// }).catch(err => {

					//       })
				}
			},
			//模糊查询
			mapTree(value, arr) {
				//console.log(value, arr)
				let newarr = [];
				arr.forEach(element => {
					if (element.name.indexOf(value) > -1) { // 判断条件
						newarr.push(element);
					} else {
						if (element.list && element.list.length > 0) {
							let redata = this.mapTree(value, element.list);
							if (redata && redata.length > 0) {
								let obj = {
									...element,
									list: redata
								};
								newarr.push(obj);
							}
						}
					}
				});
				return newarr;
			},
			// 获取维修地址
			confirm_dz(e) {
				this.from.report = e[0].label + e[1].label + e[2].label + e[3].label
				// console.log(JSON.stringify(this.from.report));
				this.showList = this.list_dz
			},
			// 获取维修地址列表
			getPlace() {
				this.$u.post('/index/get_place', {}).then(res => {
					this.list_dz = res.data
					//console.log(JSON.stringify(res.data))

				})
			},
			//  获取保修类目
			getClassi() {
				this.$u.post('/index/classi', {}).then(res => {
					res.data.forEach(item => {
						item.logo_image = this.$IMG_URL + item.logo_image
					})
					//console.log(res)
					this.list = res.data
				})
			},
			confirm(e) {
				// console.log(e)
				this.classification_name = e[0].label
				this.from.classification_id = e[0].value
			},
			//  保修提交
			save_order() {
				let files = [];
				let images = []
				// 通过filter，筛选出上传进度为100的文件(因为某些上传失败的文件，进度值不为100，这个是可选的操作)
				files = this.$refs.uUpload.lists.filter(val => {
					return val.progress == 100;
				})
				// 如果您不需要进行太多的处理，直接如下即可
				// files = this.$refs.uUpload.lists;
				//console.log(files)
				files.forEach(item => {
					images.push(item.response.data.url)
				})
				this.from.report_images = images.join(',')

				if (this.from.report == '选择报修地点') {
					uni.showToast({
						icon: 'none',
						title: '请选择维修地点'
					})
					return
				}

				// if(this.from.report_address == ''){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入报修详情位置'
				// 	})
				// 	return
				// }
				if (this.from.report_message == '') {
					uni.showToast({
						icon: 'none',
						title: '请输入报修情况'
					})

					return
				}

				// if(this.from.report_message == ''){
				// 	uni.showToast({
				// 		icon:'none',
				// 		title:'请输入报修情况'
				// 	})
				// 	return
				// }

				if (images.length == 0) {
					uni.showToast({
						icon: 'none',
						title: '请上传报修图片'
					})
					return
				}

				if (this.getradiovalue(this.from.order_user_type) == 1) {
					if (this.from.user_name == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入报修人员姓名'
						})
						return
					}

					if (this.from.user_phone == '') {
						uni.showToast({
							icon: 'none',
							title: '请输入报修人员联系电话'
						})
						return
					}
					let tel = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
					if (!tel.test(this.from.user_phone)) {
						uni.showToast({
							icon: 'none',
							title: '联系电话格式错误'
						})
						return
					}
				}


				this.from.order_user_type = this.getradiovalue(this.from.order_user_type)
				this.from.is_two_repair = this.getradiovalue1(this.from.is_two_repair)
				// console.log(JSON.stringify(this.from))
				this.$u.post('index/save_order', {
					...this.from
				}).then(res => {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
					this.from.order_user_type = this.getradioname(this.from.order_user_type)
					this.from.is_two_repair = this.getradioname1(this.from.is_two_repair)
					setTimeout(() => {
						uni.navigateBack({
							delta: 1
						})
					}, 800)
				}).catch(res => {
					//console.log(res)
					this.from.order_user_type = this.getradioname(this.from.order_user_type)
					this.from.is_two_repair = this.getradioname1(this.from.is_two_repair)
					uni.showToast({
						icon: 'error',
						title: res.data.msg
					})
				})

			},
			// 选择地址
			// chooseLocation(){
			// 	let that = this
			// 	uni.chooseLocation({
			// 		success: function (res) {
			// 			console.log('位置名称：' + res.name);
			// 			console.log('详细地址：' + res.address);
			// 			console.log('纬度：' + res.latitude);
			// 			console.log('经度：' + res.longitude);
			// 			that.from.report = res.name
			// 			console.log(that.from.report)
			// 			// that.from.report_address = res.address
			// 			console.log(that.from)
			// 		},
			// 		fail:function(err){
			// 			console.log(err)
			// 		}
			// 	});
			// },
			chooseLocation() {
				let that = this
				that.show = true

			}
		}
	}
</script>

<style lang="less">
	.content {
		padding: 0;
		padding-bottom: 60rpx;
	}

	.btn-moren {
		height: 100rpx;
		font-size: 45rpx;
	}

	.u-flex {
		font-size: 36rpx !important;
	}

	.form-box {
		background: #fff;
		margin-bottom: 10rpx;
		padding: 0 20rpx;
	}

	.form-item {
		display: flex;
		min-height: 90rpx;
		align-items: center;
		border-bottom: 1px solid #EAEAEA;
	}

	.form-lable {
		font-size: 39rpx;
		flex-shrink: 0;
		margin-right: 20rpx;

		text {
			color: #E60012;
		}
	}

	.form-content {
		width: 100%;
		// display: flex;
		font-size: 30rpx;

		textarea {
			width: 100%;
			height: 135rpx;
		}
	}

	.column {
		.form-lable {
			justify-content: flex-start;
			align-items: flex-start;
		}

		justify-content: flex-start;
		flex-direction: column;
		align-items: flex-start;
	}

	.form-title {
		font-size: 40rpx;
		font-weight: bold;
		// margin-bottom: 40rpx;
	}

	/deep/ .u-list-item {
		margin: 9rpx !important;
	}

	.u-radio {
		margin-top: 19px;
	}
</style>
